<template>
  <div class="main-box">
    <el-row>
      <div class="title-box">
        <el-text class="title">商品浏览</el-text>
      </div>
    </el-row>
    <el-row class="searchAreaProduct">
      <el-form label-width="150px" style="width: 100%">
        <el-row>
          <el-col :span="8">
            <el-form-item label="通用名">
              <el-input v-model="data.product.nickName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名">
              <el-input v-model="data.product.productName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-input v-model="data.product.suppliers">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品批号">
              <el-select v-model="data.product.classs" placeholder="全部批号">
                <el-option v-for="classs in data.classes" :label="classs.descs" :value="classs.descs">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剂型">
              <el-select v-model="data.product.type" placeholder="全部剂型">
                <el-option v-for="type in data.types" :label="type.descs" :value="type.descs">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-button @click="query" type="success" style="width: 350px">
                <el-icon>
                  <Search/>
                </el-icon>&nbsp;&nbsp; 搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row class="productTable">
      <el-table :data="data.productList">
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" label="包装规格"></el-table-column>
        <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
        <el-table-column prop="classs" label="产品批号"></el-table-column>
        <el-table-column prop="type" label="剂型"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
      </el-table>
      <el-row style="width: 100%; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.stockPage.currentPage"
            @current-change="handleCurrentChangeStock"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.stockPage.total"
        />
      </el-row>
    </el-row>

  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, ref} from "vue";
import axios from "axios";
import moment from "moment/moment";
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  clientList: [],
  history: [],//已完成订单
  select: {
    status: [],
    statusBack: "",
    client: "",
    OrderId: ""
  },
  date: moment(new Date()).format(' YYYY-MM-DD HH:mm'),
  clientPage: {
    currentPage: 1,
    total: ""
  },
  historyPage: {
    currentPage: 1,
    total: ""
  },
  detailList: {
    show: false,
    list: []
  },
  //测试
  orderDetails: {
    detailId: "",
    orderId: 4,
    productId: 3,
    quantity: 20
  },
  //订单添加数据
  order: {
    orderId: "",
    client: "",
    createTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    consignee: "",
    consigneePhone: "",
    address: "",
    userId: ""
  },
//  订单对话框
  orderDialog: {
    show: false
  },
  userId: "",
//  商品显示
  productList: [],
  stockPage: {
    currentPage: 1,
    total: ""
  },
  //商品查询
  product: {
    nickName: "",
    productName: "",
    suppliers: "",
    classs: "",
    type: ""
  },
  classes: [],
  types: []
})
//商品表
const handleCurrentChangeStock = () => {
  axios({
    url: "http://localhost:8080/productView/selectAll",
    method: "get",
    params: {
      currentPage: data.stockPage.currentPage,
      size: 5
    }
  }).then((res) => {
    data.productList = res.data.data;
    data.stockPage.total = res.data.total;
  })
}
//下拉
const initSelect = () => {
  //批号
  axios({
    url: "http://localhost:8080/dict/selectClass",
    method: "get",
    params: ""
  }).then((res) => {
    data.classes = res.data.data;
  })
  //剂型
  axios({
    url: "http://localhost:8080/dict/selectType",
    method: "get",
    params: ""
  }).then((res) => {
    data.types = res.data.data;
  })
}
//商品查询
const query = () => {
  axios({
    url: "http://localhost:8080/productView/myQuery",
    method: "get",
    params:
        {
          currentPage: data.stockPage.currentPage,
          size: 5,
          nickName: data.product.nickName,
          productName: data.product.productName,
          suppliers: data.product.suppliers,
          classs: data.product.classs,
          type: data.product.type
        }
  }).then((res) => {
    data.productList = res.data.data;
    data.stockPage.total = res.data.total;
  })
}

//初始化
let initList = () => {

  initSelect();//初始化下拉菜单
//  初始化商品表
  handleCurrentChangeStock();
}


onMounted(() => {
  getId();
  initList();
})
//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//获取userID
const getId = () => {
  console.log(sessionStorage.getItem("userId"));
  const key = sessionStorage.getItem("userId");
  if (key) {
    data.userId = key;
  } else {
    errorMessage("获取userId失败");
  }
}
</script>

<style scoped>
.main-box {
  width: 99%;
  height: 100vh;
}

.title-box {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 2px rgba(66, 61, 61, 0.89) dashed;
  background: #efedcb;
  border-radius: 30px;
}

.title {
  font-size: 40px;
  color: #6b5614;
  line-height: 100px;
  margin-left: 40px;
}

.searchAreaProduct {

  margin-top: 20px;
  width: 90%;
  margin-bottom: 10px;
}

.productTable {
  margin-left: 15px;
  width: 100%;
}

</style>